<template>
    <div class="swiperContainer">
        <div class="shop">
            <!-- swiper -->
            <swiper :options="swiperOption" class="swiper-box">
                <swiper-slide v-for="(item,index) in shops" :key="index">
                    <img :src="item.image" alt="">
                    <div class="title" v-text="item.title"></div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 28,
          centeredSlides: true,
          loop: true,
          navigation: {
            // nextEl: '.swiper-button-next',
            // prevEl: '.swiper-button-prev'
          }
        },
        swipe: null,
        shops: [{
                id:1,
                image:require("../../assets/images/hotproducts/1.jpg"),
                title:"关注店铺..."
            },
            {
                id:2,
                image:require("../../assets/images/hotproducts/2.jpg"),
                title:"关注店铺..."
            },
            {
                id:3,
                image:require("../../assets/images/hotproducts/3.jpg"),
                title:"关注店铺..."
            },
            {
                id:4,
                image:require("../../assets/images/hotproducts/4.jpg"),
                title:"关注店铺..."
            },
            {
                id:5,
                image:require("../../assets/images/hotproducts/5.jpg"),
                title:"关注店铺..."
            },
            {
                id:6,
                image:require("../../assets/images/hotproducts/6.jpg"),
                title:"关注店铺..."
            },
            ]
      }
    }
  }
  
</script>

<style lang="less" scoped>
// 这个组件默认是紧紧地贴在SearchBar的下面,因为都是块级元素
    .swiperContainer{
        margin-top:0.2rem;
        width: 100%;
        height: 1.6rem; 
        overflow: hidden; 
        background-color: #ffffff;
        padding-bottom: 0.2rem;
        .shop{
            margin: 0.1rem 0 0.2rem 0.3rem;
            .swiper-container-android .swiper-slide, .swiper-wrapper{ //如果不拿全部的类,下面的就会变样
                width: 100%;
                height: 1.6rem; 
                img{
                    width: 1rem;
                    height: 1rem;
                    border-radius: 50%;
                }
                .title{
                        margin-top: 0.2rem;
                        width: 1.2rem;
                        text-align: center;
                        color:#000;
                }
            }
        }
        // margin-left: 0.4rem;
    }
   
</style>